<template>
  <div class="dashboard-container">
    <transition-group name="fade-transform" appear tag="div" class="dashboard-content">
      <!-- 数据概览卡片 -->
      <el-row :gutter="20" key="statistics">
        <el-col :span="6" v-for="(item, index) in statisticsData" :key="index">
          <el-card class="statistics-card" :body-style="{ padding: '20px' }">
            <div class="card-header">
              <div class="card-title">
                <span>{{ item.title }}</span>
                <el-tooltip :content="item.tip" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="card-icon" :style="{ background: item.bgColor }">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
            </div>
            <div class="card-content">
              <div class="number">{{ item.value }}</div>
              <div class="compare">
                <span :class="item.trend === 'up' ? 'up' : 'down'">
                  <el-icon>
                    <component :is="item.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  {{ item.rate }}%
                </span>
                较上月
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="chart-row" key="charts">
        <el-col :span="16">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>随访完成率趋势</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="lineChartOption" autoresize />
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>病患分类统计</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="pieChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 随访提醒和待办事项 -->
      <el-row :gutter="20" class="activity-row" key="activities">
        <el-col :span="12">
          <el-card class="activity-card">
            <template #header>
              <div class="activity-header">
                <span>随访动态</span>
                <el-button text>查看更多</el-button>
              </div>
            </template>
            <div class="activity-list">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :type="activity.type"
                  :color="activity.color"
                  :timestamp="activity.time"
                  size="large"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="todo-card">
            <template #header>
              <div class="todo-header">
                <span>待随访提醒</span>
                <el-button type="primary" size="small" @click="addTodo">
                  添加随访计划
                </el-button>
              </div>
            </template>
            <el-table :data="todoList" style="width: 100%">
              <el-table-column prop="patientName" label="患者姓名" width="100" />
              <el-table-column prop="followUpDate" label="随访日期" width="120" />
              <el-table-column prop="type" label="随访类型" width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </transition-group>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  Monitor,
  User,
  Goods,
  Money,
  QuestionFilled,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

// 注册必须的 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 统计数据
const statisticsData = [
  {
    title: '待随访人数',
    value: '2,715',
    icon: User,
    bgColor: '#409EFF',
    trend: 'up',
    rate: '12.5',
    tip: '当前需要进行随访的患者数量'
  },
  {
    title: '本月随访率',
    value: '86.7%',
    icon: 'Histogram',
    bgColor: '#67C23A',
    trend: 'up',
    rate: '8.2',
    tip: '本月随访完成率'
  },
  {
    title: '新增患者',
    value: '234',
    icon: 'Plus',
    bgColor: '#E6A23C',
    trend: 'up',
    rate: '3.4',
    tip: '本月新增随访患者数'
  },
  {
    title: '异常反馈',
    value: '18',
    icon: 'Warning',
    bgColor: '#F56C6C',
    trend: 'down',
    rate: '15.7',
    tip: '需要特别关注的异常情况数量'
  }
]

// 时间范围选择
const timeRange = ref('week')

// 折线图配置
const lineChartOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['随访完成率', '患者满意度']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '随访完成率',
      type: 'line',
      smooth: true,
      data: [82, 93, 90, 93, 89, 83, 87],
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64,158,255,0.2)' },
            { offset: 1, color: 'rgba(64,158,255,0)' }
          ]
        }
      }
    },
    {
      name: '患者满意度',
      type: 'line',
      smooth: true,
      data: [92, 89, 93, 91, 94, 89, 92],
      itemStyle: {
        color: '#67C23A'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103,194,58,0.2)' },
            { offset: 1, color: 'rgba(103,194,58,0)' }
          ]
        }
      }
    }
  ]
}

// 饼图配置
const pieChartOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '患者分类',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 548, name: '术后随访' },
        { value: 335, name: '慢性病管理' },
        { value: 280, name: '产后随访' },
        { value: 184, name: '心理咨询' },
        { value: 150, name: '其他类型' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// 随访动态
const activities = [
  {
    content: '张医生完成了王某某的术后随访',
    time: '10分钟前',
    type: 'success',
    color: '#67C23A'
  },
  {
    content: '李某某的血压数据异常，需要及时干预',
    time: '30分钟前',
    type: 'warning',
    color: '#E6A23C'
  },
  {
    content: '新增产后随访患者：赵某某',
    time: '1小时前',
    type: 'info',
    color: '#909399'
  },
  {
    content: '完成本月随访质量评估',
    time: '2小时前',
    type: 'primary',
    color: '#409EFF'
  }
]

// 待随访列表
const todoList = [
  {
    patientName: '张三',
    followUpDate: '2024-03-20',
    type: '术后随访',
    status: '待随访'
  },
  {
    patientName: '李四',
    followUpDate: '2024-03-21',
    type: '慢性病随访',
    status: '已完成'
  },
  {
    patientName: '王五',
    followUpDate: '2024-03-22',
    type: '产后随访',
    status: '待随访'
  }
]

const addTodo = () => {
  // 实现添加待办的逻辑
  ElMessage.success('功能开发中...')
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);

  // 添加整体淡入和位移动画
  .fade-transform-enter-active,
  .fade-transform-leave-active {
    transition: all 0.5s;
  }

  .fade-transform-enter-from {
    opacity: 0;
    transform: translateY(30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateY(-30px);
  }

  // 为卡片添加悬浮效果
  .statistics-card {
    margin-bottom: 20px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      .card-icon {
        transform: scale(1.1);
      }

      .number {
        color: var(--el-color-primary);
      }
    }

    .card-icon {
      transition: transform 0.3s ease;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .card-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;

        .el-icon {
          font-size: 14px;
          color: #909399;
          cursor: pointer;
        }
      }

      .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }
    }

    .card-content {
      .number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .compare {
        font-size: 13px;
        color: #909399;
        display: flex;
        align-items: center;
        gap: 4px;

        .up {
          color: #67C23A;
        }

        .down {
          color: #F56C6C;
        }

        .el-icon {
          font-size: 12px;
        }
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;

    .chart-card {
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chart-container {
        height: 350px;

        .chart {
          height: 100%;
        }
      }
    }
  }

  .activity-row {
    .activity-card, .todo-card {
      .activity-header, .todo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .activity-list {
        padding: 0 20px;
      }
    }
  }

  // 为图表卡片添加动画
  .chart-card {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }

  // 为活动卡片添加动画
  .activity-card, .todo-card {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }

  // 为时间线添加动画
  .el-timeline-item {
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(5px);
    }
  }

  // 数字增长动画
  .number {
    transition: all 0.3s ease;
  }

  // 表格行悬浮效果
  :deep(.el-table__row) {
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--el-color-primary-light-9) !important;
      transform: scale(1.01);
    }
  }
}

:deep(.el-card) {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .el-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
  }
}

:deep(.el-timeline-item__node) {
  width: 12px;
  height: 12px;
}

:deep(.el-timeline-item__content) {
  font-size: 14px;
  padding-top: 4px;
}
</style>
